// 运费模板管理
<template>
  <div class="role">
     <div class="role-content">
        <div class="role-top">
            <el-button type="primary" icon="el-icon-edit" @click="addEquipment()">添加</el-button>
        </div>
        <!--内容 @current-change="handleCurrentChange" -->
        <el-card class="box-card">
             <el-table :data="listData"  ref="singleTable"
                highlight-current-row
                style="width: 100%" border>
                <el-table-column  property="freightTemplateDO.id" label="模板编号" sortable> </el-table-column>
                <el-table-column property="freightTemplateDO.templateName" label="模板名称"  > </el-table-column>
                <el-table-column property="freightTemplateDO.spuLocation" label="宝贝地址"> </el-table-column>
                <el-table-column property="freightTemplateDO.deliveryDeadline" label="发货期限"> </el-table-column>
                <el-table-column property="url" label="默认保养门栏"> </el-table-column>
                <el-table-column property="freightTemplateDO.defaultFirstNum" label="默认计费首次发货数量"> </el-table-column>
                <el-table-column property="freightTemplateDO.defaultFirstMoney" label="默认计费首次发货价格"> </el-table-column>
                <el-table-column property="freightTemplateDO.defaultContinueNum" label="默认计费续件数量"  > </el-table-column>
                <el-table-column property="freightTemplateDO.defaultContinueMoney" label="默认计费续件价格"  > </el-table-column>
                <el-table-column property="freightTemplateDO.spuLocation" label="指定地区数量"  > </el-table-column>
                <el-table-column label="操作" width='300px'>
                    <template slot-scope="scope">
                        <el-button size="mini"  @click="handelEdit(scope.row)" class="blue">修改</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 分页 -->
        <div class="block">
        <!-- current-change当前页size-change每页条数current-page当前页数，支持 .sync 修饰符page-sizes每页显示条目个数，支持 .sync 修饰符-->
        <Paging @handle="handles" :allPages="paging"></Paging>
      </div>
        <!-- 添加编辑 -->
        <div class="pop-up">
            <el-dialog :title='titleMap[dialogStatus]' :visible.sync="dialogFormVisible" :fullscreen="true">
            <el-form :model="ruleForm" ref="ruleForm" :rules="rules">
            <el-form-item label="模板名称" prop='templateName' :label-width="formLabelWidth" style="margin-left:0;">
              <el-input  v-model="ruleForm.templateName" autocomplete="off"></el-input>
            </el-form-item>    
            <el-form-item label="发货地址" prop='spuLocation' :label-width="formLabelWidth" style="margin-left:0;">
              <el-input  v-model="ruleForm.spuLocation" autocomplete="off"></el-input>
            </el-form-item>    
             <el-form-item label="发货期限" prop='deliveryDeadline' :label-width="formLabelWidth" style="margin-left:0;">
                <el-input placeholder="请输入内容" v-model="ruleForm.deliveryDeadline">
                    <template slot="append">天</template>
                </el-input>
            </el-form-item> 
             <el-form-item label="是否包邮" prop='title' :label-width="formLabelWidth" style="margin-left:0;">
                 <el-radio-group v-model="ruleForm.isFree">
                    <el-radio :label="3">坚决不包邮</el-radio>
                    <el-radio :label="6">卖家承担包邮</el-radio>
                    <el-radio :label="9">设定满额包邮</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="默认包邮额度" prop='defaultFreePrice' :label-width="formLabelWidth" style="margin-left:0;">
                <el-input placeholder="请输入内容" v-model="ruleForm.defaultFreePrice">
                    <template slot="append">元</template>
                </el-input>
            </el-form-item>  
            <el-form-item label="计费首次数量" prop='defaultFirstNum' :label-width="formLabelWidth" style="margin-left:0;">
                <el-input placeholder="请输入内容" v-model="ruleForm.defaultFirstNum">
                    <template slot="append">件</template>
                    <el-button slot="append" icon="el-tooltip el-icon-question item"></el-button>
                </el-input>
            </el-form-item>  
            <el-form-item label="计费首次价格" prop='defaultFirstPrice' :label-width="formLabelWidth" style="margin-left:0;">
                <el-input placeholder="请输入内容" v-model="ruleForm.defaultFirstPrice">
                    <template slot="append">元</template>
                </el-input>
            </el-form-item>  
            <el-form-item label="计费续件数量" prop='defaultContinueNum' :label-width="formLabelWidth" style="margin-left:0;">
                <el-input placeholder="请输入内容" v-model="ruleForm.defaultContinueNum">
                    <template slot="append">件</template>
                    <el-button slot="append" icon="el-tooltip el-icon-question item"></el-button>
                </el-input>
            </el-form-item>  
            <el-form-item label="计费续件价格" prop='defaultContinuePrice' :label-width="formLabelWidth" style="margin-left:0;">
                <el-input placeholder="请输入内容" v-model="ruleForm.defaultContinuePrice">
                    <template slot="append">元</template>
                </el-input>
            </el-form-item>  
            <div>
            <el-form-item label="指定地区价格" :label-width="formLabelWidths" style="width:500px">
                <button type="button" class="el-button el-button--primary is-plain" @click="addsite()"><span>添加</span></button>
            </el-form-item>
                 <template style="margin-left: 155px;" class="location">
                    <el-table
                    :data="tableData"
                    style="width: 800px;margin-left: 155px;">
                   <el-table-column prop="designatedArea" label="指定省份">{{row.designatedArea}}</el-table-column>
                   <el-table-column prop="firstNum" label="首次数量"></el-table-column>
                   <el-table-column prop="firstMoney" label="首次价格"></el-table-column>
                   <el-table-column prop="continueNum" label="续件数量"></el-table-column>
                   <el-table-column prop="continueMoney" label="续件价格"></el-table-column>
                   <el-table-column prop="freePrice" label="满额包邮门栏" ></el-table-column>
                   <el-table-column prop="name" label="操作"></el-table-column>
                    </el-table>
                </template>
                <!-- freightTemplateCarriageDOList: [{"designatedAreaList":["北京市"],"designatedArea":"北京市","freePrice":900,"firstNum":8,"firstMoney":700,"continueNum":6,"continueMoney":500}] -->
            </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisiblelist = false">取 消</el-button>
                <el-button type="primary" @click="affirm(ruleForm)">确 定</el-button>
            </div>
        </el-dialog>
        </div>
        <div class="pop-uplist">
             <el-dialog title="添加" :visible.sync="dialogFormVisiblelist">
            <el-form :model="ruleFormList" ref="ruleFormList" :rules="rulesList">
            <el-form-item label="包邮门栏" prop='freePrice' :label-width="formLabelWidthb" style="margin-left:0;">
                <el-input placeholder="请输入内容" v-model="ruleFormList.freePrice">
                    <template slot="append">元</template>
                </el-input>
            </el-form-item>  
            <el-form-item label="首次数量" prop='firstNum' :label-width="formLabelWidthb" style="margin-left:0;">
                <el-input placeholder="请输入内容" v-model="ruleFormList.firstNum">
                    <template slot="append">件</template>
                </el-input>
            </el-form-item>  
            <el-form-item label="首次价格" prop='firstMoney' :label-width="formLabelWidthb" style="margin-left:0;">
                <el-input placeholder="请输入内容" v-model="ruleFormList.firstMoney">
                    <template slot="append">元</template>
                </el-input>
            </el-form-item>  
            <el-form-item label="续件数量" prop='continueNum' :label-width="formLabelWidthb" style="margin-left:0;">
                <el-input placeholder="请输入内容" v-model="ruleFormList.continueNum">
                    <template slot="append">件</template>
                </el-input>
            </el-form-item>  
            <el-form-item label="续件价格" prop='continueMoney' :label-width="formLabelWidthb" style="margin-left:0;">
                <el-input placeholder="请输入内容" v-model="ruleFormList.continueMoney">
                    <template slot="append">元</template>
                </el-input>
            </el-form-item> 
             <el-form-item label="续件价格" prop='designatedArea' style="margin-left:0;" width='900px'>
               <el-checkbox-group v-model="ruleFormList.designatedArea" @change="handleCheckedCitiesChange">
                   <el-checkbox v-for="(item,index) in cities" :label="item" :key="index">{{item}}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>  
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisiblelist = false">取 消</el-button>
                <el-button type="primary" @click="affirmSite(ruleFormList)">确 定</el-button>
            </div>
        </el-dialog>
        </div>
     </div>
  </div>
</template>
<script>
import ordermanage from'../../api/operate/ordermanage'
import Paging from "../../components/Paging"; //分页
const cityOptions=['北京', '天津', '河北省', '山西省', '吉林','辽宁','河北','江苏','浙江省','安徽省','福建','江西省','山东','河南','湖北','湖南','广东','海南','四川','贵州','云南','陕西','甘肃','青海','台湾'];
export default {
components: {
    Paging
  },
  data() {
    return {
        isIndeterminate: true,
        cities: cityOptions,
        tableData:[],
        formLabelWidths:'',
        formLabelWidthb:'200px',
        checkedCities: [],
        radio: 3,
        dialogFormVisiblelist:false,//弹框关闭按钮
     // 分页
      paging:{
        adType: '',
        status:"",
        currentPage: 1,//当前的默认的页数
        eachpage: 10,//默认的页码
        total: 0,//初始值共数据条
        totalPageNo: 1,
      },
      listData:[],//初始化数据
      dialogFormVisible:false,
      FormVisible: false, //弹窗口
      select:[],//选中的权限'
      data:[],
    // 弹框
     dialogStatus:"",
      titleMap: {
        addEquipment:'新增',            
        editEquipment: "编辑"            
     },
     //  输入框宽度
     formLabelWidth: '120px',
    //  输入框
     ruleForm:{
        templateName:'',//名称
        spuLocation:'',//地址
        isFree:'',//是否包邮
        deliveryDeadline:'',//天数
        defaultFreePrice:'',//默认包邮额度
        defaultFirstPrice:'',//计费首次价格
        defaultFirstNum: '',//计费首次数量
        defaultContinuePrice: '',//计费续件价格
        defaultContinueNum: '',//计费续件数量
        freightTemplateCarriageDOList:[]
     },
     ruleFormList:{
         designatedArea:[],//指定地区
         freePrice:'',//满额包邮门栏
         firstNum:'',//首次数量
         firstMoney:"",//首次价格
         continueNum:'',//续件数量
         continueMoney:"",//续件价格
     },
      rulesList:{
         designatedArea:[
             {required: true, message: '指定地区不能为空', trigger: 'blur'}
         ],
         freePrice:[
           { required: true, message: '满额包邮门栏不能为空', trigger: 'blur'},
           {required: true,pattern:/^[1-9][0-9]*$/,message: '请输入整数！',trigger: 'blur'}
        ],
         firstNum:[
           { required: true, message: '首次数量不能为空', trigger: 'blur'},
           {required: true,pattern:/^[1-9][0-9]*$/,message: '请输入整数！',trigger: 'blur'}
        ],
         firstMoney:[
           { required: true, message: '首次价格不能为空', trigger: 'blur'},
           {required: true,pattern:/^[1-9][0-9]*$/,message: '请输入整数！',trigger: 'blur'}
        ],
         continueNum:[
           { required: true, message: '续件数量不能为空', trigger: 'blur'},
           {required: true,pattern:/^[1-9][0-9]*$/,message: '请输入整数！',trigger: 'blur'}
        ],
         continueMoney:[
           { required: true, message: '续件价格不能为空', trigger: 'blur'},
           {required: true,pattern:/^[1-9][0-9]*$/,message: '请输入整数！',trigger: 'blur'}
        ],
      },
      rules:{
        templateName:[
           { required: true, message: '模板名称不能为空', trigger: 'blur'}
        ],
         deliveryDeadline:[
           { required: true, message: '发货期限不能为空', trigger: 'blur'}
        ],
         defaultFreePrice:[
           { required: true, message: '包邮门栏额度不能为空', trigger: 'blur'},
           {required: true,pattern:/^[1-9][0-9]*$/,message: '请输入整数！',trigger: 'blur'}
        ],
         defaultFirstPrice:[
           { required: true, message: '首次价格不能为空', trigger: 'blur'},
           {required: true,pattern:/^[1-9][0-9]*$/,message: '请输入整数！',trigger: 'blur'}
        ],
         defaultFirstNum:[
           { required: true, message: '首次数量不能为空', trigger: 'blur'},
           {required: true,pattern:/^[1-9][0-9]*$/,message: '请输入整数！',trigger: 'blur'}
        ],
         defaultContinuePrice:[
           { required: true, message: '计费续件价格不能为空', trigger: 'blur'},
           {required: true,pattern:/^[1-9][0-9]*$/,message: '请输入整数！',trigger: 'blur'}
        ],
         defaultContinueNum:[
           { required: true, message: '计费续件数量不能为空', trigger: 'blur'},
           {required: true,pattern:/^[1-9][0-9]*$/,message: '请输入整数！',trigger: 'blur'}
        ],
      },
      currentPage:"",
      val: [],
    }
  },
  filters:{
    adTypes:function(value){
        switch (value) {
            case 4:value='首页轮播下5按钮'
                break;
           case 2:value='分类精选'
                break;
            case 1:value='轮播'
                break;
            case 3:value='横幅'
                break;
            case 1:value='轮播'
                break;
        }
        return value
    },
    statuslist:function(value) {
      switch (value) {
            case 0:value='冻结'
                break;
           case 1:value='激活'
                break;
            case 2:value='全部'
        }
        return value
    }
  },
  created() {
 this.Commentmanage();
  },
  methods: {
   
    // 分页负值
    handles(val) {
      this.allPages = val;
    },
    //数据详情
      Commentmanage(){
        let _this=this
        ordermanage.order().then(res=>{
            console.log(res)
         _this.listData=res.data.data;
            console.log(_this.listData)
            // _this.ruleForm={...res.data.data.items}
            // _this.paging.currentPage=res.data.data.pageNo
            // _this.paging.eachpage=res.data.data.pageSize
            // _this.paging.total=res.data.data.total
            // _this.paging.totalPageNo=res.data.data.totalPageNo
        })
      },
    //   多选按钮
      handleCheckedCitiesChange(value) {
          console.log(value)
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      },
    // 地址添加
    addsite(){
        this.dialogFormVisiblelist = true;
    },
    // 确认添加地址
    affirmSite(ruleFormList){
        let _this=this;
           _this.$refs.ruleFormList.validate((valid) => {
          if (valid) {
              _this.tableData=_this.ruleFormList
              _this.dialogFormVisiblelist = false;
              _this.Commentmanage()
          } else {
           _this.$message.error('输入框不能为空！');
            return false;
          }
          console.log(_this.tableData)
          console.log(_this.ruleFormList)

        });
    },
     // 添加
     addEquipment() {
        this.dialogFormVisible = true;
        this.dialogStatus = 'addEquipment';
        this.ruleForm={}
    },
     // 编辑
      handelEdit(row) {
        console.log(row)
         this.dialogFormVisible = true;
         this.dialogStatus = 'editEquipment';
         this.ruleForm={...row}
          this.ruleForm.adId=row.id
         this.ruleForm.status=row.status==1?'冻结':'激活'
    },
  },
    watch: {
    // 去除错误提示
    dialogFormVisible(val){
     if (val == false) {
         this.$refs.ruleForm.clearValidate();
     }
    }
    }
}
</script>
<style scoped>
.role{
    width: 100%;
    line-height: 0px;
    overflow: hidden;
}
.role/deep/.el-checkbox-group{
    width: 400px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    position: relative;
    left: 92px;
    top: -40px;
}
/* 添加编辑 */
.pop-uplist>>>.el-form-item__label{
width: 100px !important;
padding-right: 80px;
}
.pop-uplist>>>.el-input__inner{
    width: 250px;
}
.pop-up>>>.el-form-item__label{
width: 150px !important;
padding-right: 100px;
}
.el-form{
padding: 0 50px;
}
.el-input{
    width: 300px;
}
.pop-up .el-form/deep/.el-input__inner{
    width: 500px;
}
.el-form/deep/.el-form-item__content{
    width: 300px;
    margin-left:0 !important;
} 
>>>.el-dialog/deep/.el-dialog__header{
    width: 50px;
}
.el-form-item/deep/.el-form-item__error{
    text-indent:8rem
}
/* 分页 */
.block{
    width: 40%;
    padding-top: 20px;
}
/* 字体居中 */
.blue{
    background: #409EFF;
    color: #ffffff;
}
.el-table--enable-row-transition/deep/.el-table__body td {
   text-align: center;
}
.el-table/deep/th.is-sortable {
    cursor: pointer;
    text-align: center;
}
.el-table td, .el-table/deep/th.is-leaf {
    text-align: center;
}
/* 布局 */
.el-card/deep/.box-card{
  height: 50%;
   overflow: hidden;
}
.role-content{
    width: 96%;
    margin: auto;
    overflow: hidden;
}
.el-input{
    width: 200px;
    margin-right: 10px;
}
.role-top{
    width: 300px;
   line-height: 60px;
}
.role-top/deep/.el-select{
    margin-right: 10px;
}
.box-card{
   overflow: hidden;
}
</style>
